<template>
    <el-form-item :label="labaltxt" :label-width="haswidth">
        <el-input v-model="searchStoreIdd" placeholder="门店来源" @blur="blurFn"></el-input>
        <ul class="searchStore" v-if="searchUlShow">
            <li v-for="sitem in searchStoreList" :key="sitem.store_id" @click="selectStore(sitem)">{{sitem.store_name}}</li>
        </ul>
    </el-form-item>
</template>
<style lang="scss" scoped>
.searchStore{
    width: 220px;
    box-shadow: 0 0 5px #000;
    position: absolute;
    z-index: 10;
    background: #fff;
    overflow: hidden;
    li{
        height: 40px;
        line-height: 40px;
        font-size:16px;
        padding:0 10px;
    }
    li:hover{
        background: #ccc;
        
    }
}
</style>
<script>
import { abc } from "../../../js/abc.js"; 
import {potUrl} from '../../../js/config_url.js';
    export default {
        props:['searchStoreId','labaltxt','haswidth'],
        data(){
            return {
                searchStoreIdd:this.searchStoreId,
                searchStoreList:[],
                searchUlShow:false, 
                first:false
            }
        },
        watch:{
            searchStoreIdd(n,o){
                let that = this;
                if(n == ''){
                    that.searchUlShow = false; 
                    that.$emit('select_store_id','')
                }else if(n != o && n != ''){
                    if(that.first){
                        that.searchUlShow = false; 
                        that.first = false;
                        that.$emit('select_store_id','')
                    }else {
                        that.searchUlShow = true;                        
                        abc.get(that,potUrl.storesearch,{store_name:that.searchStoreIdd},(res)=>{                                
                            if(res.data.length > 0){
                                that.searchStoreList = res.data;
                            }else{
                                that.searchStoreList = [{store_name:"没有搜索到相关数据",store_id:""}]
                            }
                        })    
                    }               
                    
                }
            },
            searchStoreId(n,o){
                this.searchStoreIdd = n;
                this.first = true;
            }
        },
        methods:{
            blurFn(){
                // li被点击时执行selectStore；input失去焦点时执行blurFn，而过程是先执行了blurFn函数，故selectStore就不在执行了；
                // 暂时解决办法是：在blurFn中写个定时器，叫searchUlShow=false迟点执行，以保证selectStore函数执行了在去设置参数；
                let that = this;
                setTimeout(() => {
                    that.searchUlShow = false;
                }, 200);
            },
            selectStore(a){
                let that = this;
                if(a.store_id != ''){
                    that.searchStoreIdd = a.store_name;
                    that.$emit('select_store_id',a.store_id)
                    // that.form.select_store_id = a.store_id; 
                }
                
            },
        }
    }
</script>